//
// Article
//
.artcle-cover
  position: relative
  max-height: 20rem
  border-radius(border-radius-value)
  overflow: hidden
  .artcle-cover-img
    position: relative
    min-height: 100%
    max-width: 100%
    center-y()

.article-inner
  padding: spacer
  // Media Query
  @media media-sm
    max-width: 90rem
    margin-right: auto
    margin-left: auto

.article-header
  margin-bottom: 1rem

.article-more-link
  margin-bottom: 0

.article-tag-list
  list-unstyled()
  position: relative
  padding-left: 1em
  &::before
    content: ''
    background-size: cover
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='gray' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z'></path><line x1='7' y1='7' x2='7.01' y2='7'></line></svg>")
    sizing(1em)
    display: block
    position: absolute
    left: 0
    center-y()
  .article-tag-list-item
    display: inline-block
    padding: spacer

.article-entry
  @extend $base-style

// Article Nav
// post_prev & post_next
.article-nav
  border-top: border-width border-color solid
  clearfix()
  .article-nav-link-wrap
    &#article-nav-newer
      float: left 
      text-align: left
    &#article-nav-older
      float: right
      text-align: right
    .article-nav-caption
      color: dark-color

// Article author avatar
// Avatar
.article-author-avatar
  rounded-circle(2.4em)